HTML Heading Tag
The HTML Heading Tag is used to define titles and section headings on a webpage. HTML provides six heading levels — <h1> to <h6> — where <h1> is the largest and most important, and <h6> is the smallest.
What is a Heading Tag?
- Heading tags define hierarchy and structure for page content.
- There are six levels of headings:
<h1>to<h6>. <h1>represents the main title; lower levels are subtitles.- Search engines use headings to understand page structure for SEO.
Why Use Heading Tags?
Page Structure
Headings divide pages into clean, scannable sections that users can navigate easily.
SEO Boost
Search engines like Google rely on heading tags to understand a page's topic and rank it.
Accessibility
Screen readers use headings to jump between sections, helping visually impaired users.
Hierarchy
Six levels of headings create a clear visual and logical hierarchy of information.
Styling
Each heading has default sizes and weights, providing quick visual variation.
Quick Skimming
Readers skim content via headings before deciding to read a full article.
Heading Tags Syntax
<h1>Largest Heading</h1><h2>Sub Heading</h2><h3>Smaller Heading</h3><h4>,<h5>and<h6>are used for further sub-levels.- Use only one
<h1>per page for best SEO.
Heading Tag Example
<!DOCTYPE html> <html> <head> <title>Heading Tags</title> </head> <body> <h1>This is Heading 1</h1> <h2>This is Heading 2</h2> <h3>This is Heading 3</h3> <h4>This is Heading 4</h4> <h5>This is Heading 5</h5> <h6>This is Heading 6</h6> </body> </html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <h1> | Main heading; largest in size and most important for SEO. |
| <h2> | Section heading; used under <h1>. |
| <h3> | Sub-section heading; used under <h2>. |
| <h4> | Fourth-level heading for deeper sub-sections. |
| <h5> | Fifth-level heading; rarely used. |
| <h6> | Smallest heading; least important. |
Heading Levels
Use Cases
- Blog Posts: Use
<h1>for the title,<h2>for sections. - Documentation: Use multi-level headings for chapters and sub-chapters.
- Landing Pages: A clear
<h1>increases conversions and SEO. - News Articles: Help readers scan stories quickly.
Practice Questions
- Create a webpage that uses all six headings from
<h1>to<h6>. - Build a blog post layout using one
<h1>and three<h2>headings. - Style
<h1>with red color using inline CSS. - Explain why using multiple
<h1>tags is not recommended for SEO.
Frequently Asked Questions
How many heading tags are there in HTML?
HTML has six heading tags from <h1> (largest) to <h6> (smallest).
Which is the most important heading tag?
<h1> is the most important. It defines the main title of the page and is heavily used by search engines.
Can I use multiple h1 tags on one page?
Technically yes, but it is recommended to use only one <h1> per page for best SEO and clarity.
Are heading tags good for SEO?
Yes. Headings help search engines understand structure and context, improving search rankings.
Conclusion
HTML heading tags (h1 to h6) are essential for organizing content, improving readability, and boosting SEO. Use them wisely to structure your webpages so both users and search engines can understand them clearly.
Additional Tips
- One H1 per page: Use only one
<h1>for the main title. - Maintain hierarchy: Don't skip levels (e.g. h1 → h3 without h2).
- Keep concise: Headings should be short and descriptive.
- Style with CSS: Customize sizes and weights using CSS for design consistency.